<template>
  <div>
    <!-- 滚动标签栏 -->
    <!-- <van-tabs @click="onClick">
      <van-tab title="标签 1" name="11">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
    </van-tabs> -->
    <van-tabs @click="changeTab">
      <van-tab
        :title="item.title"
        v-for="item in cateList"
        :key="item.id"
        :name="item.id"
      >
      </van-tab>
      <ul>
        <li v-for="item in imageList" :key="item.id">
          <router-link :to="'/detailList/' + item.id">
            <div class="content">
              <p>{{ item.title }}</p>
              <p class="main">{{ item.content }}</p>
            </div>
            <div class="img">
              <img :src="item.img_url" />
            </div>
          </router-link>
        </li>
      </ul>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      reqId: 0,
      imageList: []
    }
  },
  created() {
    this.getCateList()
    this.getImageList()
  },
  methods: {
    async getCateList() {
      const res = await this.$http.get('/api/getimgcategory')
      const params = {
        title: '全部',
        id: 0
      }

      this.cateList = res.data.message
      this.cateList.unshift(params)
    },
    async getImageList() {
      const res = await this.$http.get(`/api/getimages/${this.reqId}`)

      this.imageList = res.data.message
    },
    // 点击切换内容
    async changeTab(name) {
      this.reqId = name
      const res = await this.$http.get(`/api/getimages/${this.reqId}`)
      this.imageList = res.data.message
      console.log(this.imageList)
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  padding: 10px;

  li {
    position: relative;
    margin-bottom: 10px;
    border-radius: 4px;
    .content {
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 0 10px;
      color: #fff;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.4);
      .main {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
    .img {
      width: 100%;
      img {
        width: 100%;
        display: block;
        border-radius: 4px;
      }
    }
  }
}
</style>
